<template>
<div>
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center page-self-style">
            <span class="nums">共 {{ page.total }} 条</span>
            <li class="page-item">
                <div class="page-link" @click="handleLastPage()"><</div>
            </li>
            <li class="page-item">
                <div :class="page.current==1?'page-link active':'page-link'" @click="changeCurrentPage(1)">1</div>
            </li>
            <li class="page-item" v-if="page.current>4&&pageTotal>7">
                <div class="page-link" @click="handleLastFiveCurrent">...</div>
            </li>
            <li class="page-item" v-for="item in pageTotalArr" >
                <div :class="page.current==item?'page-link active':'page-link'" @click="changeCurrentPage(item)">{{item}}
                </div>
            </li>
            <li class="page-item" v-if="pageTotal>7&&page.current+3<pageTotal">
                <div class="page-link"  @click="handleNextFiveCurrent" >...</div>
            </li>
            <li class="page-item" v-if="pageTotal&&pageTotal!=1">
                <div :class="page.current==pageTotal?'page-link active':'page-link'" @click="changeCurrentPage(pageTotal)">{{ pageTotal }}</div>
            </li>
            <li class="page-item">
                <div class="page-link" @click="handleNextPage">></div>
            </li>
        </ul>
    </nav>
</div>
</template>

<script>
export default {
    name: "index",
    data(){
        return{
            page: {
                total: 300,
                size: 10,
                current: 5,
            },
            messageData: {
                list: [],
                title:''
            },
        }
    },
    computed: {
        pageTotal() {
            return Math.ceil(this.page.total * 1 / this.page.size * 1)
        },
        pageTotalArr(){
            var arr=[];
            if(this.page.current>0&&this.page.current<5){//
                //console.log(1)
                for(var i=2;i<=this.pageTotal-1;i++){
                    if(arr.length<5){
                        arr.push(i)
                    }
                }
                 console.log(1,arr)
            }else{
                if(this.page.current+3>this.pageTotal&&this.page.current<this.pageTotal+1){
                    for(var i=-(this.pageTotal-2);i<0;i++){
                        if(arr.length<this.pageTotal-2){
                            arr.push(this.pageTotal+i)
                        }
                    }
                     console.log(2,arr)
                }else{
                    //console.log(3)
                    for(var i=-2;i<this.pageTotal;i++){
                        if(arr.length<5){
                            arr.push(this.page.current+i)
                        }
                    }
                     console.log(3,arr)
                }
            }
            console.log(arr)
            return arr;
        },
    },
    created() {

        var page = {
            total: 0,
            size: 10,
            current: 1,
            siteSonType:""
        }
        let r1 = {
            data:{
                data: [

                ],
                total: 81,
                size: 10,
                current: 1
            }
        }
        this.page = r1.data ;
        console.log("后台打印数据集:",r1.data)
        //return { messageData: r1.data,page:r1.data}

    },
    methods:{
        getList(currentPage) {
           let page1 = {
                current: this.page.current,
                size: 10,
                total:this.page.total
            }
            this.page = page1
        },
        //改变当前页
        changeCurrentPage(currentPage) {
            this.page = {
                current: currentPage,
                size: this.page.size,
                total:this.page.total
            }
            this.getList(this.page)
        },
        //上一页
        handleLastPage() {
            if (this.page.current == 1) {
                return false
            }
            this.changeCurrentPage(this.page.current - 1)
        },
        //下一页
        handleNextPage() {
            if (this.page.current == this.pageTotal) {
                return false
            }
            this.changeCurrentPage(this.page.current + 1)
        },
        //上5页
        handleLastFiveCurrent(){
            this.page.current=this.page.current-5;
            this.getList(this.page)
        },
        //下5页
        handleNextFiveCurrent(){
            this.page.current=this.page.current+5;
            this.getList(this.page)
        }
    }
}
</script>

<style scoped>

/*分页*/
.page-self-style .page-link {
    border-color: transparent;
    color: unset;
    cursor: pointer;
}

/*.page-self-style a{*/
/*  color: unset;*/
/*}*/
.page-self-style a:focus,
.page-self-style .active>.page-link,
.page-self-style .page-link.active {
    color: #be222a;
    background: transparent;
    box-shadow: unset;
    border-color: transparent;
    font-weight: 400;
}

.page-self-style .active {
    border-bottom: unset;
    line-height: unset;
}

.page-self-style .nums {
    margin: auto 0px;
}
.tabBox{
    float: right;
    overflow: hidden;
}
.tabBox span{
    float: left;
    font-size: 14px;
    line-height: 24px;
}
.tabBox li{
    float: left;
    font-size: 14px;
    padding: 0px 8px;
    margin: 0 5px;
    line-height: 24px;
    cursor: pointer;
    font-family:'MicrosoftYaHei';
    background:#FAFAFA;
    border:1px solid#D9D9D9;
    border-radius:2px;
}
.tabBox li:last-child{
    margin-right: 0 !important;
}

.tabBox .licheckd,
.tabBox li:hover{
    color: #be222a;
    border: 1px solid #be222a;
    background-color: #fff6f6;
}
</style>